// 粒子效果  网上找的  https://m.qy.cn/jszx/detail/18027.html

var canvas = '';
var ctx = '';
const mouse = {};
const particlesArray = [];
const particleOriginSize = 10;//粒子初始半径
const particleOriginSpeed = 5;//粒子初始速度
const particleDisapperSpeed = 0.1;//粒子消失速度
const particleDisapperSize = 0.3;//粒子消失时的size  size小于消失速度会出现负值报错
const maxLineLength = 100;//最大线段长度
var hue = 0; // 色相
var width =window.innerWidth;
var height = window.innerHeight;

export const  main = function() {
  canvas = document.querySelector('#canvas');
  ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // canvas.addEventListener('mousemove',(e)=>{
  //   addParticles(e);
  // })
  // canvas.addEventListener('click',(e)=>{
  //   addParticles(e);
  // })
  setInterval(()=>{
    if(particlesArray.length > 1000){
      return;
    }
    let num1 = Math.random()* width;
    let num2 = Math.random()* height;
    for(let i=0;i<20;i++){
      let pos = {
        x : num1 + i*10,
        y : num2 + i*10,
      }
      addParticles(pos);
    }
  },200)
  canvas.addEventListener('mouseout',()=>{
    mouse.x = undefined;
    mouse.y = undefined;
  })

  animation();
}
// 每帧调用
function animation(){
  // ctx.clearRect(0, 0, canvas.width, canvas.height);
  hue++;
  ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  handleParticles();
  requestAnimationFrame(animation)
}
// 添加粒子
function addParticles(e){
  mouse.x = e.x;
  mouse.y = e.y;
  Array.apply(null,{length:2}).forEach(()=>{
    particlesArray.push(new Particle())
  })
}

class Particle{
  constructor(){
    this.x = mouse.x;
    this.y = mouse.y;
    this.size = Math.random() * particleOriginSize+1;
    this.speedX = Math.random() * particleOriginSpeed - particleOriginSpeed/2;
    this.speedY = Math.random() * particleOriginSpeed - particleOriginSpeed/2;
  }
  update(){
    this.size -= particleDisapperSpeed;//粒子消失速度
    this.x += this.speedX;//更新坐标
    this.y += this.speedY;
  }
  // 画圆
  drawCircle(){
    ctx.beginPath();
    ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
    ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
    ctx.fill();
    ctx.closePath();
  }
}

// 处理所有粒子对象
function handleParticles(){
  for(let i =0;i<particlesArray.length;){
    particlesArray[i].update();
    particlesArray[i].drawCircle();
    // 从当前粒子开始，往后遍历后面的粒子，依次计算与之对应的距离
    for (let j = i + 1; j < particlesArray.length; j++) {
      const dx = particlesArray[i].x - particlesArray[j].x;
      const dy = particlesArray[i].y - particlesArray[j].y;
      const distance = Math.sqrt(dx * dx + dy * dy); // 初中知识
      if (distance < maxLineLength) { // 距离太大舍弃，否则视觉效果不好
      // 绘制直线
      ctx.beginPath();
      ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
      ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
      ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
      ctx.stroke();
      ctx.closePath();
      }
    }
    if(particlesArray[i].size <= particleDisapperSize){
      particlesArray.splice(i,1);
    }else{
      i++;
    }
  }
}